import 'package:flutter/material.dart';
import 'package:yyshort/common/model/useInfo_model.dart';
import 'package:yyshort/common/model/video_model.dart';

class ScrollableListWidget extends StatelessWidget {
  final int playingNowIndex;
  final List<EpisodeModel> items;
  final void Function(int index) onItemTap;
  final ScrollController? scrollController; // 允许外部传入控制器

  ScrollableListWidget({
    super.key,
    required this.items,
    required this.playingNowIndex,
    this.onItemTap = _defaultOnTap,
    this.scrollController, // 新增控制器参数
  });

  static void _defaultOnTap(int index) {}

  // 滚动到指定索引的方法
  static void scrollToIndex(ScrollController? controller, int index) {
    if (controller?.hasClients ?? false) {
      // 计算目标位置（每个item高度45 + 上下margin共10 = 55）
      double position = (index - 1) * 55.0;
      controller?.animateTo(
        position,
        duration: const Duration(milliseconds: 100),
        curve: Curves.easeInOut,
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: const Color(0xFF16151A),
      child: Scrollbar(
        controller: scrollController, // 使用传入的控制器
        // 2. 显示滚动条轨道（可选，便于调试）
        thumbVisibility: true,
        child: ListView.builder(
          controller: scrollController, // 使用传入的控制器
          padding: EdgeInsets.zero,
          itemCount: items.length,
          itemBuilder: (context, index) {
            EpisodeModel model = items[index];
            final showLeft = playingNowIndex == index ? true : false;
            final showRight = UserInfo().vipExpireTime.isNotEmpty
                ? false
                : (model.isUnlock == 1 ? false : true);

            return GestureDetector(
              onTap: () => onItemTap(index),
              child: Container(
                margin: const EdgeInsets.fromLTRB(10, 5, 10, 5),
                decoration: BoxDecoration(
                  color: const Color(0xFF2D2C31),
                  borderRadius: BorderRadius.circular(10),
                ),
                height: 45,
                child: Row(
                  children: [
                    Visibility(
                      visible: showLeft,
                      child: Container(
                        margin: const EdgeInsets.only(left: 27.5),
                        child: Image.asset(
                          'assets/images/episode_list_icon.png',
                          width: 15,
                          height: 7.5,
                          errorBuilder: (context, error, stackTrace) =>
                              Container(
                                width: 15,
                                height: 7.5,
                                color: Colors.grey,
                              ),
                        ),
                      ),
                    ),
                    const SizedBox(width: 21),
                    Text(
                      'Episode ${index + 1}',
                      style: const TextStyle(color: Colors.white),
                    ),
                    const Spacer(),
                    Visibility(
                      visible: showRight,
                      child: Container(
                        margin: const EdgeInsets.only(right: 27.5),
                        child: Image.asset(
                          'assets/images/lock.png',
                          width: 17.5,
                          height: 12,
                          errorBuilder: (context, error, stackTrace) =>
                              Container(
                                width: 17.5,
                                height: 12,
                                color: Colors.grey,
                              ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}
